<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/echarts.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <!--<script src="preview/js/echarts.min.js"></script>用这个包  箭头出不来-->

    <title>今日到馆人数</title>
    <style>
        .come{
            width:10.8rem;
            height: auto;
            /*background-color: #000;*/
        }
    </style>
</head>
<body>
<div class="come clearfix">
    <div class="botBar_title xycenterbox">
        <img src="preview/img/no2.png" alt="" class=""/>
        <p>今日到馆人数&nbsp;&nbsp;</p>
        <p class="">(总数:<span style="color:#8ad5f9">1564896</span>)</p>
    </div>
    <div class="comeContent">
        <div id="barTwo" style="width: 10.8rem;height: 4.3rem;"></div>
    </div>
</div>
</body>
<script>
    var barTwo,barTwoChart,chart_timer=null,currentSize,waitCountNum=0;
    var xData=['平桥乡', '分路口镇', '苏埠镇', '南楼村农家书屋', '单王乡', '韩摆渡镇', '独山镇', '江家店镇', '青山乡', '狮子岗乡','顺河镇','罗集乡','石板冲乡','固镇镇','石婆店镇','新安镇','西市街道','城南镇','西河口乡','丁集镇','鼓楼街道','徐集镇','小华山街道'];
    var data = [];
    for (var i = 0; i < 23; i++) {
        data.push(1000);
    }
    function createCanvas(){
        barTwo = {
//            title: {
//                text: '动态数据 + 时间坐标轴'
//            },
//            tooltip: {
//                trigger: 'axis',
//                formatter: function (params) {
//                    params = params[0];
//                    var date = new Date(params.name);
//                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
//                },
//                axisPointer: {
//                    animation: false
//                }
//            },
            grid:{
                y:"10%",
                y2:"22%",
                x2:"2%",
                x:"6%"
            },

            xAxis: {
                type: 'category',
                data:xData,
                axisTick: {
                    show: false////控制去掉刻度线
                },
                axisLine:{show:true,symbol:['none','arrow'],lineStyle:{color:"#fff"}},///控制坐标轴线的颜色
                axisLabel : {
                    show:true,
                    interval:0,
                    rotate:45,
                    textStyle: {
                        color:'#1981ff',////控制坐标轴字体的颜色
                        fontSize:16*currentSize/100
                    },
                },
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: '#1e3d64'
                    }
                },//网格线
                splitArea : {show : false},//网格区域

            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false////控制去掉刻度线
                },
                axisLine:{show:true,symbol:['none','arrow'],lineStyle:{color:"#fff"}},///控制坐标轴线的颜色
                axisLabel : {
                    show:true,
                    formatter: '{value}',
                    textStyle: {
                        color:'#1981ff',////控制坐标轴字体的颜色
                        fontSize:16*currentSize/100
                    }
                },
                splitLine:{
                    show: true,
                    lineStyle:{
                        color: '#1e3d64'
                    }
                },//网格线
                splitArea : {show : false}//网格区域
            },
            series: [{
                name: '模拟数据',
                type: 'bar',
//                showSymbol: false,
                barWidth:9,
                itemStyle: {////设置柱状的颜色和label显示
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: "#2075da",
                        barBorderRadius:[2, 2, 2, 2],///设置柱状的圆角
                        //color:function(params) {////设置每个柱子的颜色不同
                        //    // build a color map as your need.
                        //    var colorList = [
                        //        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        //        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        //        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        //    ];
                        //    return colorList[params.dataIndex]
                        //},

                        label: {//以下为是否显示，显示位置和显示格式的设置了
                            show: true,
                            position: 'top',
                            fontSize:16*currentSize/100,
                            formatter: '{c}',
//                            formatter: '{b}\n{c}'
                            textStyle:{
                                fontSize:16*currentSize/100,
                                color:"#1981ff"
                            }

                        }
                    }
                },
//                hoverAnimation: false,
                data: data
            }]
        };

        barTwoChart = echarts.init(document.getElementById('barTwo'));
        barTwoChart.setOption(barTwo);
    }
    window.onresize = function(){
        currentSize=getRem(100,1080);
        init();
        barTwoChart.resize();
    };
    window.onload = function(){
        currentSize=getRem(100,1080);
        init();
        waitTime();
    };
    function waitTime(){
        if(!!window.chart_timer)	cancelAnimationFrame(window.chart_timer);
        if(waitCountNum >= 900){///15秒重复一次动效
            waitCountNum = 0;
            init();
        }
        waitCountNum++;
        window.chart_timer = requestAnimationFrame(waitTime);
    }
    function init(){
        if(!!barTwoChart){
            barTwoChart.dispose();
        }
        createCanvas();
    }


</script>
</html>